<template>
  <div>
      <el-form-item label="上传图片" prop="images" >
          <el-upload v-loading="flashpicLoading"
                    class="upload-demo"
                    action="index.php?module=API&method=AdsPlace.transfile&format=json"
                    :show-file-list="false"
                    :on-success="handleUploadChange"
                    :before-upload="beforeUpload"
                    :on-error="onUploadError"
                     accept=".jpg,image/jpeg,.png,image/png,.gif"
                    >
                    <el-button type="primary" icon="el-icon-upload" size="mini"
                        >点击上传</el-button
                    >
                    <label >支持jpg、gif、png,格式</label>
                    <!-- <p class="in_pictureURL">使用网络图片URL</p> -->
                    </el-upload>
                    <!-- 上传图片结果显示url -->
            <div v-if="formData.adpic" class="word-break">
                      <a> {{formData.adpic}} </a></div>
          </el-form-item>
<!--  -->
          <el-form-item label="点击链接" prop="linkurl">
            <el-input
              v-model="formData.linkurl"
              autocomplete="off"
              v-on:change="update"
              placeholder="请输入点击链接"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
          <!--  -->
    <el-form-item label="弹窗位置" prop="posx">
      <el-radio-group v-model="formData.posx" size="medium" v-on:change="update">
        <el-radio
          v-for="(item, index) in posxOptions"
          :key="index"
          :label="item.value"
          :disabled="item.disabled"
          >{{ item.label }}</el-radio
        >
      </el-radio-group>
    </el-form-item>

    <el-form-item label="X轴偏移" prop="offsetX">
      <el-input
        v-model="formData.offsetX"
        v-on:change="update"
        autocomplete="off"
        placeholder=" "
        :style="{ width: '20%' }"
      ></el-input>
      PX
    </el-form-item>
    <!--  -->
     <el-form-item label="弹窗位置" prop="posy">
      <el-radio-group v-model="formData.posy" size="medium" v-on:change="update">
        <el-radio
          v-for="(item, index) in posyOptions"
          :key="index"
          :label="item.value"
          :disabled="item.disabled"
          >{{ item.label }}</el-radio
        >
      </el-radio-group>
    </el-form-item>
    <!--  -->
    <el-form-item label="Y轴偏移" prop="offsetY">
      <el-input
        v-model="formData.offsetY"
        v-on:change="update"
        autocomplete="off"
        placeholder=" "
        :style="{ width: '20%' }"
      ></el-input>
      PX
    </el-form-item>

    <el-form-item label="弹窗宽度" prop="winWidth">
      <el-input
        v-model="formData.winWidth"
        v-on:change="update"
        autocomplete="off"
        placeholder=" "
        :style="{ width: '20%' }"
      ></el-input>
      PX
    </el-form-item>

    <el-form-item label="弹窗高度" prop="winHeight">
      <el-input
        v-model="formData.winHeight"
        v-on:change="update"
        autocomplete="off"
        placeholder=" "
        :style="{ width: '20%' }"
      ></el-input>
      PX
    </el-form-item>

  </div>
</template>
<script>
//   <!-- 漂浮弹窗的html广告 -->
export default {
  components: { },
  props:['formData'],
  data: function(){
      return {
     
        flashpic: undefined, //临时图片保存
        flashpicLoading: false, //上传的loading 等待；
        posxOptions:[
             {
                label: "居左",
                value: 1,
                },
                {
                label: "居右",
                value: 2,
            }, 
        ],
        posyOptions:[
             {
                label: "居上",
                value: 1,
                },
                {
                label: "居下",
                value: 2,
            }, 
        ],

      }
  },
   methods: {
     update( ) {
      this.$emit('htmlcodechange', this.formData)
    },
        // 上传备用图片
    handleUploadChange(response, file, fileList){
        this.formData.adpic = response.data;
        this.flashpicLoading = false;
        this.update();
    },
    beforeUpload(file ){
      this.flashpicLoading=true;
    },
    onUploadError(err, file, fileList){
      this.flashpicLoading = false;
      this.$message({message:"上传失败", type:"error"})
    },
   }
}
</script>
